<template>
  <div class="criteria-table-render" :style="{ textAlign: (fieldData.textAlign || 'left'), fontSize: getFontSize() }">
    <div class="table-container">
      <table class="criteria-table-content">
        <thead>
          <tr>
            <th 
              v-for="col in fieldData.columns" 
              :key="col.id"
              :style="{ width: col.width }"
              :class="{ 'header-shaded': fieldData.headerShading !== false }"
            >
              {{ col.title }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in fieldData.rows" :key="row.id">
            <td v-for="col in fieldData.columns" :key="col.id">
              <!-- 序号类型 -->
              <template v-if="col.type === 'number'">
                {{ row[col.id] || index + 1 }}
              </template> 
              
              <!-- 文本类型：无值时不显示下划线，保持为空 -->
              <template v-else-if="col.type === 'text'">
                <span v-if="row[col.id]" class="cell-content">{{ row[col.id] }}</span>
              </template>
              
              <!-- 多行文本类型（按行渲染） -->
              <template v-else-if="col.type === 'textarea'">
                <div v-if="row[col.id] && (Array.isArray(row[col.id]) ? row[col.id].length : String(row[col.id]).length)" class="cell-content multiline">
                  <div v-for="(line, li) in (Array.isArray(row[col.id]) ? row[col.id] : [String(row[col.id])])" :key="li">
                    {{ line }}
                  </div>
                </div>
                <div v-else class="cell-placeholder multiline">
                  <div class="placeholder-line"></div>
                  <div class="placeholder-line"></div>
                </div>
              </template>
              
              <!-- 单选类型 -->
              <template v-else-if="col.type === 'radio'">
                <div class="radio-options">
                  <div 
                    v-for="opt in row.options[col.id]" 
                    :key="opt.value"
                    class="radio-option"
                  >
                    <span class="checkbox-mark">
                      {{ row[col.id] === opt.value ? '☑' : '☐' }}
                    </span>
                    {{ opt.label }}
                  </div>
                </div>
              </template>
              
              <!-- 复选框类型 -->
              <template v-else-if="col.type === 'checkbox'">
                <div class="checkbox-options">
                  <div 
                    v-for="opt in (row.options && row.options[col.id] ? row.options[col.id] : col.options)" 
                    :key="opt.value || opt.label"
                    class="checkbox-option"
                  >
                    <span class="checkbox-mark">
                      {{ row[col.id]?.includes(opt.value) ? '☑' : '☐' }}
                    </span>
                    {{ opt.label }}
                  </div>
                </div>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div v-if="fieldData.note" class="table-note">{{ fieldData.note }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  fieldData: {
    type: Object,
    required: true,
    default: () => ({
      title: '',
      columns: [],
      rows: [],
      note: '',
      alignment: 'left'
    })
  }
})

// 字体映射
const getFontSize = () => {
  const map = { '小二': '18pt', '小四': '12pt', '五号': '10.5pt', '小五': '9pt' }
  return map[props.fieldData?.fontSize] || '10.5pt'
}
</script>

<style lang="scss" scoped>
.criteria-table-render {
  font-family: '宋体', SimSun, serif;
  line-height: 1.5;
  width: 100%;
  
  .table-title {
    font-weight: bold;
    margin-bottom: 12px;
    text-align: center;
  }
  
  .table-container {
    margin-bottom: 12px;
    overflow-x: auto;
  }
  
  .criteria-table-content {
    width: 100%;
    border-collapse: collapse;
    
    th, td {
      border: 1px solid #000;
      padding: 8px;
      text-align: center;
      vertical-align: middle;
    }
    
    th {
      font-weight: bold;
    }
    .header-shaded {
      background-color: #f5f7fa;
    }
    
    .cell-content {
      display: block;
      
      &.multiline {
        white-space: pre-wrap;
        text-align: left;
      }
    }
    
    .cell-placeholder {
      display: block;
      
      &.multiline {
        .placeholder-line {
          width: 100%;
          height: 20px;
          border-bottom: 1px solid #000;
          margin-bottom: 4px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    
    .radio-options,
    .checkbox-options {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      text-align: left;
    }
    
    .radio-option,
    .checkbox-option { display: flex; gap: 4px; font-size: 14px; }
    .checkbox-mark { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; font-family: sans-serif; font-size: 21px; }
  }
  
  .table-note {
    margin-top: 8px;
    font-style: italic;
    color: #666;
  }
}
</style>